<template>
	<view class="app-view">
		<view class="head" @click="toLogin">
			<view class="user el-flex">
				<view class="img">
					<template v-if="!isLogin">
						<image src="../../static/images/avatar.76a75b8f17.png" mode=""></image>
					</template>
					<template v-else>
						<image src="https://s1.mi.com/m/images/m/default.png" mode=""></image>
					</template>
				</view>
				<template v-if="!isLogin">
					<view class="name">
						登录/注册
					</view>
				</template>
				<template v-else>
					<view class="name">
						<view class="p">
							{{user}}
						</view>
						<view class="account">
							{{user}}
						</view>
					</view>
				</template>
			</view>
		</view>
		<view class="b1 el-flex">
			<view class="cite">
				我的订单
			</view>
			<view class="bl-l" @click="toOrderList">
				<text>全部订单</text>
			</view>
		</view>
		<view class="ul el-flex">
			<view class="li dfk el-flex">
				<view class="icon ">
					<image src="../../static/images/dfk.png" mode=""></image>
				</view>
				<text>待付款</text>
			</view>
			<view class="li dah el-flex">
				<view class="icon ">
					<image src="../../static/images/dsh.png" mode=""></image>

				</view>
				<text>待收货</text>
			</view>
			<view class="li thx el-flex">
				<view class="icon ">
					<image src="../../static/images/nav-4.d68723895f.png" mode=""></image>
				</view>
				<text>退换修</text>
			</view>
		</view>
		<view class="ui-line"></view>
		<view class="items">
			<view class="item i-member">
				<view class="cite">
					会员中心
				</view>
			</view>
			<view class="item i-wallet">
				<view class="cite">
					会员中心
				</view>
			</view>
		</view>
		<view class="ui-line"></view>
		<view class="items">
			<view class="item i-service">
				<view class="cite">
					服务中心
				</view>
			</view>
			<view class="item i-mihome">
				<view class="cite">
					小米之家
				</view>
			</view>
		</view>
		<view class="ui-line"></view>
		<view class="items">
			<view class="item i-fcode">
				<view class="cite">
					我的F码
				</view>
			</view>
			<view class="item i-gift">
				<view class="cite">
					礼物码兑换
				</view>
			</view>
		</view>
		<view class="ui-line"></view>
		<view class="items">
			<view class="item i-setting" @click="toSetting">
				<view class="cite">
					设置
				</view>
			</view>
		</view>
		<u-modal :show="show" :title="title" :showCancelButton='true' @cancel='cancel' @confirm='confirm'>
			<view class="slot-content">
				<view class="fz-xs">
					<view class="a">
						《小米商城用户协议》
					</view>
					<view class="a">
						《小米商城隐私政策》
					</view>
					<view class="a">
						《小米帐号用户协议》
					</view>
					<view class="a">
						《小米帐号隐私政策》
					</view>
					<view class="p">
						请您仔细阅读以上协议，其中有对您权利义务的特别约定等重要条款，同意后方可使用本软件
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isLogin: false,
				user: '',
				show: false,
				title: '',
			}
		},
		methods: {
			toOrderList() {
				uni.navigateTo({
					url: '/subPage/orderList/orderList'
				})
			},
			cancel() {
				this.show = false
			},
			confirm() {
				uni.navigateTo({
					url: '/pages/login-view/login-view'
				})
				this.show = false
			},
			toLogin() {
				if (this.isLogin) return;
				this.show = true
			},
			toSetting() {
				uni.navigateTo({
					url: '/pages/setting/setting'
				})
			},
			getUserData() {
				let self = this
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/getUserData',
					method: 'GET',
					header: {
						Authorization: userToken
					},
					success: function(res) {
						if (res.data.code == 200) {
							self.user = res.data.data.user
							self.isLogin = true
						} else if (res.data.code == 401) {
							self.isLogin = false
						}
					}
				})
			},
		},
		onShow() {
			let isLogin = uni.getStorageSync('isLogin')
			if (!isLogin || isLogin == 'no') {
				this.isLogin = false
			} else {
				this.getUserData()
				this.isLogin = true
			}
		}
	}
</script>
<style lang="scss" scoped>
	view {
		line-height: 1.15;
		box-sizing: border-box;
		font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, Microsoft Yahei, sans-serif;
	}

	.app-view {

		.head {
			background: url(../../static/images/bg.63c8e19851.png) center 0 #f37d0f;
			background-size: auto 100%;
			padding: 0.32rem 0;

			.user {
				justify-content: flex-start;

				.img {
					margin: 0 0.16rem 0 0.32rem;
					width: 0.96rem;
					height: 0.96rem;
					overflow: hidden;
					box-sizing: border-box;
					border-radius: 100%;
					border: 3px solid hsla(0, 0%, 100%, .4);
					text-align: center;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					color: #fff;
					font-size: .24rem;
					text-align: left;

					view {
						font-size: .24rem;
					}

					.account {
						color: hsla(0, 0%, 100%, .6);
					}
				}
			}
		}

		.b1 {
			background-color: #fff;
			justify-content: space-between;
			height: 0.8rem;
			border-bottom: 1px solid rgba(0, 0, 0, .15);
			color: rgba(0, 0, 0, .54);
			position: relative;
			padding-right: 0.56rem;

			&::after {
				content: "";
				position: absolute;
				right: 0.32rem;
				top: 50%;
				width: 0.2rem;
				height: 0.2rem;
				border-left: 1px solid currentColor;
				border-top: 1px solid currentColor;
				transform: translate3d(0, -50%, 0) rotate(135deg);
				-webkit-transform: translate3d(0, -50%, 0) rotate(135deg);
			}

			.cite {
				font-size: .28rem;
				padding: 0 0 0 0.32rem;
				color: rgba(0, 0, 0, .87);
			}

			.bl-l {
				text {
					font-size: .24rem;
					color: rgba(0, 0, 0, .87);
				}
			}
		}

		.ul {
			justify-content: space-around;
			background-color: #fff;

			.li {
				display: flex;
				position: relative;
				padding: 0.4rem 0;
				flex-direction: column;

				text {
					font-size: .22rem;
					color: rgba(0, 0, 0, .87);
				}

				.icon {
					margin: 0 auto 0.16rem;
					width: 0.48rem;
					height: 0.48rem;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.ui-line {
			height: 0.2rem;
			background: #f5f5f5;
			overflow: hidden;
			clear: both;
		}

		.items {

			background: #fff;

			.item {
				display: flex;
				align-items: center;
				padding-right: 0.56rem;
				padding-left: 1.12rem;
				background-repeat: no-repeat;
				position: relative;
				color: rgba(0, 0, 0, .54);
				background-size: 0.48rem auto;
				border-bottom: 1px solid rgba(0, 0, 0, .15);
				line-height: 0;
				height: 1.04rem;
				background-position: 0.383rem center;

				&:after {
					content: "";
					position: absolute;
					right: 0.32rem;
					top: 50%;
					width: 0.2rem;
					height: 0.2rem;
					border-left: 1px solid currentColor;
					border-top: 1px solid currentColor;
					transform: translate3d(0, -50%, 0) rotate(135deg);
					-webkit-transform: translate3d(0, -50%, 0) rotate(135deg);
				}

				.cite {
					font-size: .28rem;
					font-style: normal;
					color: rgba(0, 0, 0, .87);
				}
			}

			.i-member {
				background-image: url(../../static/images/i-member.png);
			}

			.i-wallet {
				background-image: url(../../static/images/i-wallet.png);
			}

			.i-service {
				background-image: url(../../static/images/i-service.png);
			}

			.i-mihome {
				background-image: url(../../static/images/i-mihome.png);
			}

			.i-fcode {
				background-image: url(../../static/images/i-fcode.png);
			}

			.i-gift {
				background-image: url(../../static/images/i-gift.png);
			}

			.i-setting {
				background-image: url(../../static/images/i-setting.png);
			}
		}
	}

	/deep/.u-modal__content {
		padding: 0 !important;
	}

	/deep/.u-modal {
		width: 6.5rem !important;
	}

	.slot-content {
		text-align: left;
		margin: 0.4rem;
		line-height: 1.5em;
		color: #676767;
		font-size: .28rem;

		view {
			line-height: 1.5em;
		}

		.fz-xs {
			font-size: .24rem;

			.a {
				display: inline;
				color: #ff6700;
				margin-right: 0.1rem;
			}

			.p {}
		}
	}
</style>